<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<!DOCTYPE html>
<html>
<head>
<title>常熟市妇女联合会</title>
<meta name="viewport"
	content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" />
<link href="<%=basePath%>/css/sweetalert.css" rel="stylesheet" />
<link href="<%=basePath%>/css/idangerous.swiper.css" rel="stylesheet" />
<script type="text/javascript" src="<%=basePath%>/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/sweetalert.min.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
	font-family: "微软雅黑"
}

.none {
	display: none
}

li {
	list-style: none
}

body {
	background: #D5FFCA
}

a {
	text-decoration: none
}

.baiyi-vote-warp {
	margin: 0 auto;
	max-width: 40pc
}

.baiyi-vote-searhbox {
	overflow: hidden;
	padding: 10px
}

.baiyi-vote-vote-data {
	padding: 10px
}

.baiyi-vote-vote-data ul {
	display: -webkit-box;
	display: box
}

.baiyi-vote-vote-data li {
	border-right: 1px solid #f0f0f0;
	color: #ff2946;
	text-align: center;
	-webkit-box-flex: 1
}

.baiyi-vote-vote-data li.no {
	border: 0
}

.search-input {
	float: left;
	padding-right: 10px;
	width: 80%
}

.search-input input {
	box-sizing: border-box;
	padding: 5px 10px;
	width: 100%;
	height: 35px;
	outline: 0;
	border: 2px solid #ff2946;
	border-radius: 5px;
	background-color: #fff;
	line-height: 35px
}

.search-btn {
	overflow: hidden
}

.search-btn a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	border: 1px solid #ff2946;
	border-radius: 5px;
	background-color: #ff2946;
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 35px
}

.baiyi-vote-content {
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 auto;
}

.baiyi-vote-content .item {
	float: left;
	margin-top: 10px;
	width: 50%
}

.baiyi-vote-content .item .item-content {
	padding: 0 10px
}

.baiyi-vote-content .item:nth-child(even) .item-content {
	padding: 0 10px 0 0px
}

.baiyi-vote-content .item .item-content .box {
	border: 1px solid #f0f0f0;
	background: #fff
}

.baiyi-vote-content .item .item-content .box .pic {
	position: relative;
	overflow: hidden;
	text-align: center
}

.baiyi-vote-content .item .item-content .box .pic img {
	width: 100%;
	height: 200px
}

.baiyi-vote-content .item .item-content .box .btnwarp {
	margin: 10px auto;
	text-align: center
}

.musicwarp {
	margin: 5px auto;
	text-align: center
}

.baiyi-vote-content .item .item-content .box .info {
	display: -webkit-box;
	height: 68px
}

.baiyi-vote-content .item .item-content .box .info span {
	display: block;
	color: #333;
	text-align: center;
	font-size: 9pt;
	line-height: 20px;
	-webkit-box-flex: 1
}

.baiyi-vote-content .item .item-content .box .info span.g {
	color: green
}

.baiyi-vote-content .item .item-content .box .info span.r {
	color: red
}

.btnvote {
	padding: 6px 10px
}

.btnmusic, .btnvote {
	display: block;
	margin: 5px 10px;
	border-radius: 2px;
	color: #fff;
	font-size: 9pt;
	cursor: pointer
}

.btnvoted {
	display: block;
	margin: 5px 10px;
	padding: 6px 10px;
	border-radius: 2px;
	background-color: #ccc !important;
	color: #fff;
	font-size: 9pt;
	cursor: pointer
}

.btnvote:first-child {
	background-color: #f50 !important
}

.btnvote:nth-child(2) {
	background-color: #ff3963
}

.btnvote:last-child {
	background-color: #44b549
}

.baiyi-vote-rule {
	bottom: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%
}

.baiyi-vote-rule ul {
	display: -webkit-box;
	display: box;
	padding: 0 4px
}

.baiyi-vote-rule ul li {
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 0 2px;
	height: 40px;
	font-size: 1pc;
	line-height: 40px;
	-webkit-box-flex: 1
}

.baiyi-vote-rule ul li a {
	display: block;
	width: 100%;
	height: 40px;
	border-radius: 4px;
	background: #ff3963;
	color: #fff;
	text-align: center;
	font-size: 14px
}

.baiyi-copyright {
	padding: 5px 0;
	color: #000;
	text-align: center;
	font-size: 9pt
}

#loading {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 99;
	margin-top: -73px;
	margin-left: -73px
}

#loading, #loading .lbk, #loading .lcont {
	width: 146px;
	height: 146px
}

#loading .lbk, #loading .lcont {
	position: absolute
}

#loading .lbk {
	top: 0;
	left: 0;
	z-index: 0;
	border-radius: 10px;
	background-color: #000;
	opacity: .5
}

#loading .lcont {
	top: 0;
	left: 0;
	z-index: 1;
	color: #f5f5f5;
	text-align: center;
	font-size: 14px;
	line-height: 35px
}

#loading img {
	display: block;
	margin: 30px auto;
	width: 35px;
	height: 35px
}

.ajaxloading {
	margin: 10px;
	background: #fff;
	color: #44b549;
	text-align: center;
	font-size: 9pt;
	line-height: 30px
}
</style>
</head>
<body>
	<form name="form1" method="post" action="<%=basePath%>/vote/vote.htm" id="form1">
		<div></div>
		<div class="baiyi-vote-warp">
			<div class="head">
				<div class="swiper-container">
				<!-- 滚动广告 -->
					<ul class="swiper-wrapper">
						<li class="swiper-slide"><a href="javascript:void(0)"><img
								src="<%=basePath%>/images/1.jpg"
								alt="" width="100%" /></a></li>
						<li class="swiper-slide"><a href="javascript:void(0)"><img
								src="<%=basePath%>/images/2.jpg"
								alt="" width="100%" /></a></li>
						<li class="swiper-slide"><a href="javascript:void(0)"><img
								src="<%=basePath%>/images/3.jpg"
								alt="" width="100%" /></a></li>
					</ul>
				</div>
			</div>
			<div class="baiyi-vote-vote-data">
				<ul class="data-list">
					<li>
						<p>参与选手</p>
						<p>${totalPlayer}人</p>
					</li>
					<li>
						<p>累计投票</p>
						<p id="totalVoted">${totalVoted}票</p>
					</li>
					<li class="no">
						<p>访问量</p>
						<p>${totalVisted}</p>
					</li>
				</ul>
			</div>
			<div class="baiyi-vote-searhbox">
				<div class="search-input">
					<input type="text" placeholder="请输入编号 " id="number" name="number" value="${id }"/>
				</div>
				<div class="search-btn">
					<a id="search">搜索</a>
				</div>
			</div>
			<div class="baiyi-vote-rule">
				<ul class="clearfix">
					<li><a
						href="<%=basePath%>/vote.htm?openId=${openid}">活动首页</a></li>
					<li><a
						href="<%=basePath%>/voteNote.htm?openId=${openid}">活动须知</a></li>
					<li><a
						href="<%=basePath%>/votePrice.htm?openId=${openid}">奖项设置</a></li>
					<li><a
						href="<%=basePath%>/voteRank.htm?openId=${openid}">活动排行</a></li>
					<li><a
						href="<%=basePath%>/voteUpload.htm?openId=${openid}">我要报名</a></li>
				</ul>
			</div>
			<div class="baiyi-vote-content">
			<c:forEach items="${list }" varStatus="status" var="player">
				<div class="item">
					<div class="item-content">
						<div class="box">
							<div class="pic">
								<a
									href="<%=basePath%>/voteinfo.htm?id=${player.id }"><img
									<c:if test="${player.compress==null }">src="<%=basePath%>/upload/${player.img}"</c:if>
									<c:if test="${player.compress!=null }">src="<%=basePath%>/upload/${player.compress}"</c:if>
									alt="" height="100px"/></a><span class="g"
									style="padding: 2px; display: block; position: absolute; top: 0; left: 0; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.5)">编号:${player.id }</span><span
									class="g"
									style="padding: 2px 0; display: block; width: 100%; position: absolute; bottom: 0; left: 0; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.5)"></span>
							</div>
							<div class="info">
								<span>${player.content }</span>
								<!--  <span class="r"><i itemId="${player.id }">${player.votedNum }</i> 票</span>-->
							</div>
							<div class="btnwarp">
								<a href="javascript:void(0);" class="btnvote" 
									itemId="${player.id }" propertyId="1">投票(<span class="vc">${player.votedNum }票</span>)
								</a>
							</div>
						</div>
					</div>
				</div>
			</c:forEach>
			</div>
			<div class="ajaxloading"><c:if test="${empty list }">暂无记录！</c:if><c:if test="${!empty list }">点击加载更多</c:if></div>
			<div class="baiyi-copyright">
				&copy;点讯科技
				<div class="none"></div>
			</div>
		</div>
	</form>
</body>
<script type="text/javascript">
	var page = 0;
	var loading = false;
	var voting = false;
	var IsCommitInfo = 0;
	var IsAutoLoad = 0;
	var loading_asset = '<%=basePath%>/images/loading.gif';
	function _hideLoading() {
		window.setTimeout(function() {
			var div = document.getElementById('loading');
			if (div)
				div.style.display = 'none';
		}, 250);
	}
	function _showLoading() {
		var div = document.getElementById('loading');
		if (!div) {
			div = document.createElement('div');
			div.style.display = 'none';
			div.id = 'loading';
			div.innerHTML = '<div class="lbk"></div><div class="lcont"><img src="' + loading_asset + '" alt="loading..."/>正在加载...</div>';
			document.querySelector('body').appendChild(div);
		}
		;
		window.setTimeout(function() {
			div.style.top = ($('body').scrollTop + 150) + 'px';
			div.style.display = '';
		}, 150);
	}
	$(function() {
		var mySwiper = new Swiper('.swiper-container', {
			calculateHeight : true,
			roundLengths : true,
			loop : true,
			autoplay : 5000
		})

		//瀑布流布局
		$('.baiyi-vote-content').imagesLoaded(function() {
			//$('.baiyi-vote-content').masonry({
			//	itemSelector : '.item',
			//	gutter : 0,
			//	isAnimated : true
			//});
		})

		vote();

		if (IsAutoLoad > 0) {
			//滚动加载
			$(window).scroll(
					function() {
						if (!loading) {
							page++;
							loadproduct(page);
						}
					})
		} else {
			//异步加载
			$(".ajaxloading").click(
					function() {
						if (!loading) {
							page++;
							loadproduct(page);
						}
					})
		}

		//搜索
		$("#search").click(
						function() {
							var url = "<%=basePath%>/vote.htm?id="+ $("#number").val();
							window.location.href = url;
							return false;
						})
		if('${error}'=='error'){
			swal({   
				title: "错误",   
						text: "请先关注本微信号！",   
						type: "warning",   
						confirmButtonColor: "#DD6B55",   
						confirmButtonText: "确定",   
						closeOnConfirm: false 
				}, 
				function(){   
					location.href="<%=basePath%>/sub.htm";
				});
			
		}

	})

	function vote() {
		$(".btnvote").each(function() {
			$(this).unbind("click").click(function() {
				var that = this
				;
				var voteId = $(this).attr("itemId");
				voteItem(that, voteId);
			})
		})
	}
	function voteItem(obj, voteId) {
		var that = obj;
		if (!voting) {
			$.ajax({
						type : "POST",
						url : "<%=basePath%>/doVote.htm?d="+ new Date(),
						data : {
							id : voteId,
						},
						beforeSend : function() {
							voting = true;
							_showLoading();
						},
						success : function(data) {
							_hideLoading();
							//var data = eval("(" + data + ")");
							var linkbutton = "";
							if (data=="success") {
								voting = false;
								swal({
									title :	"投票成功！",
									type : "success",
									confirmButtonText : linkbutton,
									showCancelButton : true,
									cancelButtonText : "关闭"
								}, function() {
								});
									$(that).find(".vc").html(parseInt($(that).find(".vc").html()) + 1+"票");
									//$("i[itemId="+ $(that).attr("itemId")+ "]").html(parseInt($("i[itemId="+ $(that).attr("itemId")+ "]").html()) + 1);
									$("#totalVoted").html((parseInt($("#totalVoted").html())+1)+"票");
							} else {
								voting = false;
								swal({
									title : data,
									type : "error",
									confirmButtonText : linkbutton,
									showCancelButton : true,
									cancelButtonText : "关闭"
								}, function() {
								});
							}
						},
						error : function() {
							_hideLoading();
							swal({
								title : "网络异常",
								type : "error"
							});
						}
					})
		}
	}

	function loadproduct(page) {
		if (!loading) {
			$.ajax({
				url : "<%=basePath%>/loadVote.htm?d="+ new Date(),
				type : "POST",
				beforeSend : function() {
					loading = true;
					_showLoading();
					$(".ajaxloading").html("正在加载中");
				},
				data : {
					page : page
				},
				success : function(data) {
					if (data) {
						loading = false;
						$(".ajaxloading").html("点击加载更多");
						var $boxes = $(data);
						//$boxes.imagesLoaded(function() {
							_hideLoading();
							$('.baiyi-vote-content').append($boxes);
							vote();
							//$('.baiyi-vote-content').masonry('appended', $boxes);
						//})
					} else {
						_hideLoading();
						$(".ajaxloading").html("没有更多了");
					}
				}
			})
		}
	}
</script>
</html>